<template>
  <v-app id="login">
    <v-container id="login-page" fluid fill-height>
      <v-layout align-center justify-center>
        <v-card class="default-card" width="1092px">
          <v-flex>
            <div class="flex-1 d-none d-sm-flex">
              <img class="banner" src="@/static/login20210109115125.png" alt="">
            </div>
            <div class="login-container flex-1">
              <v-form
                ref="form"
                v-model="valid"
                class="wrapper"
                lazy-validation
              >
                <!-- <img src="@/assets/img/logo.png" alt=""> -->
                <p class="v-title">
                  登錄
                </p>
                <v-text-field
                  v-model="username"
                  label="用戶名"
                  :rules="rules"
                  :error-messages="errorMessages"
                  @keyup.enter="login"
                />
                <v-text-field
                  v-model="password"
                  label="密碼"
                  type="password"
                  :rules="rules"
                  :error-messages="errorMessages"
                  @keyup.enter="login"
                />
                <v-btn
                  class="max-width"
                  :loading="loading"
                  :disabled="loading"
                  color="blue-grey white--text"
                  small
                  @click="login"
                >
                  登錄
                </v-btn>
              </v-form>
            </div>
          </v-flex>
        </v-card>
      </v-layout>
    </v-container>
  </v-app>
</template>

<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
@Component({ name: 'Login' })
export default class login extends Vue {
  public message: string = 'Sat Feb 20 2021 18:20:05 GMT+0800 (中国标准时间)'
  private username : string = ''
  private password : string = ''
  private valid: boolean = true
  private errorMessages: string = ''
  private loading:boolean = false
  private language: string[] = [
    '简体中文',
    '繁體中文',
    'English'
  ]

 rules: any[] = []
 // rules: any[] = [
 //   value:(value:string) => (value:any) => !!value || ''
 // ]

 created () {

 }

 /**
  * name
  */
 private login () {
   console.log(this.username, this.password)
 }
}
</script>

<style lang="scss">
#login{
    width: 100%;
    height: 100%;
    // @media (min-width: 768px){
    //     background: url('../../assets/img/body.svg') no-repeat;
    //     background-size: 100%;
    //     background-position: 50%;
    // }
    background: url('../static/bg.png') no-repeat;
    .banner{
      // width: 546px;
      width: 100%;
      height: 750px;
      border-radius: 10px 0 0 10px;
      object-fit: fill;
    }
    .login-container{
      height: auto;
      border-radius: none;
    }
    .wrapper{
        margin: 120px 0;
        width: 100%;
        // height: 300px;
        padding: 30px;
        // box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
        border-radius: 5px;
        .v-title{
            text-align: center;
            font-size: 30px;
            margin-bottom: 30px;
            color: #808695;
        }
        .v-btn{
          margin-left: 0 !important;
          margin-right: 0 !important;
        }
    }
}
</style>
